<template>
  <div class="dashboard-wrapper">
    <el-card class="dashboard-container">
      <template #header>
        <div class="dashboard-header">
          <h2>系统控制台</h2>
          <span class="welcome-text">欢迎回来，管理员！今天是 {{ currentDate }}</span>
        </div>
      </template>

      <!-- 统计卡片 -->
      <div class="stat-cards">
        <el-card shadow="hover" class="stat-card">
          <div class="card-content">
            <div class="card-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">用户总数</div>
              <div class="card-value">1,248</div>
              <div class="card-trend up">
                <el-icon><Top /></el-icon> 12% 周增长
              </div>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" class="stat-card">
          <div class="card-content">
            <div class="card-icon book-icon">
              <el-icon><Notebook /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">图书总数</div>
              <div class="card-value">5,673</div>
              <div class="card-trend up">
                <el-icon><Top /></el-icon> 8% 周增长
              </div>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" class="stat-card">
          <div class="card-content">
            <div class="card-icon comment-icon">
              <el-icon><ChatLineRound /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">评论总数</div>
              <div class="card-value">12,489</div>
              <div class="card-trend down">
                <el-icon><Bottom /></el-icon> 3% 周减少
              </div>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" class="stat-card">
          <div class="card-content">
            <div class="card-icon visit-icon">
              <el-icon><View /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">访问量</div>
              <div class="card-value">24,563</div>
              <div class="card-trend up">
                <el-icon><Top /></el-icon> 15% 周增长
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 图表区域 -->
      <div class="chart-area">
        <el-card shadow="hover" class="chart-card line-chart-card">
          <template #header>
            <div class="chart-title">近7天访问趋势</div>
          </template>
          <div class="chart-container">
            <LineChart ref="lineChartRef" />
          </div>
        </el-card>

        <el-card shadow="hover" class="chart-card pie-chart-card">
          <template #header>
            <div class="chart-title">图书分类分布</div>
          </template>
          <div class="chart-container">
            <PieChart ref="pieChartRef" />
          </div>
        </el-card>
      </div>

      <!-- 最近活动 -->
      <el-card shadow="hover" class="activity-card">
        <template #header>
          <div class="activity-title">最近活动</div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.time"
            :type="activity.type"
            :hollow="true"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import {
  User,
  Notebook,
  ChatLineRound,
  View,
  Top,
  Bottom
} from '@element-plus/icons-vue'
import LineChart from '../components/LineChart.vue'
import PieChart from '../components/PieChart.vue'
import { logListService } from '@/api/log.js'

// 当前日期
const currentDate = computed(() => {
  const now = new Date()
  return now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 最近活动数据
  // 最近活动数据
  const activities = ref()

// 图表组件引用
const lineChartRef = ref(null)
const pieChartRef = ref(null)

// 处理窗口大小变化
const handleResize = () => {
  lineChartRef.value?.resizeChart()
  pieChartRef.value?.resizeChart()
}

// 获取最近的操作日志
const fetchLogs=async ()=>{
  let result=await logListService()
  activities.value=result.data
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  // 初始化时触发一次调整
  setTimeout(() => {
    handleResize()
    fetchLogs()
  }, 100)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped lang="scss">
.dashboard-wrapper {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.dashboard-container {
  min-height: calc(100vh - 40px);
  border-radius: 12px;
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    
    h2 {
      margin: 0;
      color: var(--el-color-primary);
      font-size: 22px;
    }
    
    .welcome-text {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
  }
  
  .stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    
    .stat-card {
      border-radius: 10px;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-3px);
      }
      
      .card-content {
        display: flex;
        align-items: center;
        padding: 16px;
        
        .card-icon {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          font-size: 24px;
          
          &.user-icon {
            background-color: rgba(64, 158, 255, 0.1);
            color: var(--el-color-primary);
          }
          
          &.book-icon {
            background-color: rgba(103, 194, 58, 0.1);
            color: var(--el-color-success);
          }
          
          &.comment-icon {
            background-color: rgba(230, 162, 60, 0.1);
            color: var(--el-color-warning);
          }
          
          &.visit-icon {
            background-color: rgba(245, 108, 108, 0.1);
            color: var(--el-color-danger);
          }
        }
        
        .card-info {
          flex: 1;
          
          .card-title {
            font-size: 14px;
            color: var(--el-text-color-secondary);
            margin-bottom: 6px;
          }
          
          .card-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 6px;
          }
          
          .card-trend {
            font-size: 12px;
            display: flex;
            align-items: center;
            
            &.up {
              color: var(--el-color-success);
            }
            
            &.down {
              color: var(--el-color-danger);
            }
            
            .el-icon {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
  
  .chart-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    
    .chart-card {
      border-radius: 10px;
      
      &:deep(.el-card__header) {
        padding: 14px 20px;
        border-bottom: 1px solid #f0f0f0;
      }
      
      .chart-title {
        font-weight: bold;
        font-size: 16px;
      }
      
      .chart-container {
        padding: 10px;
        /* 使用相对高度 */
        height: clamp(240px, 30vh, 400px);
      }
      
      &.line-chart-card {
        .chart-container {
          padding: 10px 10px 10px 0;
        }
      }
    }
  }
  
  .activity-card {
    border-radius: 10px;
    
    &:deep(.el-card__header) {
      padding: 14px 20px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .activity-title {
      font-weight: bold;
      font-size: 16px;
    }
    
    &:deep(.el-timeline) {
      padding: 10px 20px;
      
      .el-timeline-item {
        padding-bottom: 16px;
        
        .el-timeline-item__timestamp {
          color: var(--el-text-color-secondary);
          font-size: 13px;
        }
        
        .el-timeline-item__content {
          color: var(--el-text-color-primary);
          font-size: 14px;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .chart-area {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .dashboard-wrapper {
    padding: 12px;
  }
  
  .stat-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
    
    .welcome-text {
      margin-top: 0 !important;
    }
  }
  
  .chart-card .chart-container {
    /* 小屏幕上使用更小的高度范围 */
    height: clamp(200px, 35vh, 300px);
  }
}
</style>